<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <form>
            <span>用户名:</span>
            <input type="text" v-model="userData.username">
            <br>
            <span>密码:</span>
            <input type="password" v-model="userData.password">
            <br>
            <span>性别:</sapn>
            <label for="woman">女</label><input type="radio" name="sex" value="0" id="woman" v-model="userData.sex">
            <label for="man">男</label><input type="radio" name="sex" value="1" id="man" v-model="userData.sex">
            <br>
            <span>爱好:</span>
            <label for="sing">唱</label><input type="checkbox" id="sing" value="sing" v-model="userData.hobby">
            <label for="dance">跳</label><input type="checkbox" id="dance" value="dance" v-model="userData.hobby">
            <label for="rap">Rap</label><input type="checkbox" id="rap" value="rap" v-model="userData.hobby">
            <label for="basketball">篮球</label><input type="checkbox" id="basketball" value="basketball" v-model="userData.hobby">
            <br>
            <button @click.prevent="send">提交</button>
        </form>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                userData: {
                    username: '',
                    password: '',
                    sex: 0,
                    hobby: []
                }
            },
            methods: {
                send(){
                    console.log(this.userData);
                }
            }
        })
    </script>
</body>
</html>